import React from "react";
import {useNavigate} from "react-router-dom";
import {Dropdown, Avatar, MenuProps} from "antd";

import {useAppSelector, useAppDispatch} from "@/app/hooks";
import {logoutAsync, selectUser} from "@pages/Login/slice";

// import "./index.less";
import {DownOutlined} from "@ant-design/icons";

function AvatarComponent() {
    const navigator = useNavigate();
    const {avatar} = useAppSelector(selectUser);
    const dispatch = useAppDispatch();
    const handleLogout = async () => {
        await dispatch(logoutAsync());
        navigator("/login");
    };
    
    const items: MenuProps['items'] = [
        {
            label: <div onClick={() => {navigator('/mkbk/home')}}>返回首页</div>,
            key: '0'
        },
        {
            type: 'divider'
        },
        {
            label: <div onClick={handleLogout}>退出登录</div>,
            key: '1'
        }
    ]
    return (
        <Dropdown menu={{items}} trigger={['click']}>
            <Avatar src={avatar}>
                <DownOutlined/>
            </Avatar>
        </Dropdown>
    )
}

export default AvatarComponent;